import {h} from 'vue';
import {Avatar, Switch, Tag, Tooltip} from 'ant-design-vue';
import {getFileAccessHttpUrl} from '@pkg/utils/src/compUtils';
import {isEmpty} from '@pkg/utils';
import {request} from '@pkg/request';
import {Icon, ImageView} from '@components/common';
import {useUserStore} from '@/store/user';
//默认颜色定义
const colorArray = ['default', 'red', 'orange', 'green', 'cyan', 'blue', 'purple'];
const render = {
  /**
   * 渲染列表头像
   */
  renderAvatar: ({record}) => {
    if (record.avatar) {
      const avatarList = record.avatar.split(',');
      return h(
          'span',
          avatarList.map((item) => {
            return h(Avatar, {src: getFileAccessHttpUrl(item), shape: 'square', size: 'default', style: {marginRight: '5px'}});
          }),
      );
    } else {
    }
  },

  /**
   * 渲染图片
   * @param text
   */
  renderImageView: ({text}) => {
    if (!text) {
      return h(
          Avatar,
          {shape: 'square', size: 'large'},
          {
            icon: () => h(Icon, {icon: 'ant-design:file-image-outlined', size: 30}),
          },
      );
    }
    //return h(ImageView, { value: getFileAccessHttpUrl(text), height: 40 });
  },

  /**
   * 渲染图片
   * @param text
   */
  renderImage: ({text}) => {
    if (!text) {
      return h(
          Avatar,
          {shape: 'square', size: 'large'},
          {
            icon: () => h(Icon, {icon: 'ant-design:file-image-outlined', size: 30}),
          },
      );
    }
    const avatarList = text.split(',');
    const imageArray: any = [];
    avatarList.forEach((item) => {
      const url = getFileAccessHttpUrl(item);
      imageArray.push(url)
    })
    return h(ImageView, {value: imageArray, height: 40, style: {alignItems: 'center', justifyContent: 'center', display: 'flex', width: 'auto'}});
  },
  /**
   * 渲染 Tooltip
   * @param text
   * @param len
   */
  renderTip: ({text}, len = 20) => {
    if (text) {
      let showText = text + '';
      if (showText.length > len) {
        showText = showText.substr(0, len) + '...';
      }
      return h(Tooltip, {title: text}, () => showText);
    }
    return text;
  },
  /**
   * 渲染 文本
   * @param text
   * @param len
   */
  renderTxt: ({text}) => {
    if (text) {
      let showText = text + '';
      if (showText.length > 15) {
        showText = showText.substr(0, 15) + '...';
      }
      return h(Tooltip, {title: text}, () => showText);
    }
    return text;
  },
  /**
   * 渲染 html内容
   * @param htmlContent
   */
  renderHtml: ({text}) => {
    return h('div', {
      domProps: {
        innerHTML: text,
      },
    });
  },
  /**
   * 渲染 html转纯文本内容
   * @param htmlContent
   */
  renderHtmlToText: ({text}) => {
    text = text
        .replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '')
        .replace(/<[^>]+?>/g, '')
        .replace(/\s+/g, ' ')
        .replace(/&nbsp;/gi, '')
        .replace(/\s/g, '')
        .replace(/ /g, ' ')
        .replace(/>/g, ' ');
    if (text) {
      let showText = text + '';
      if (showText.length > 150) {
        showText = showText.substr(0, 150) + '...';
      }
      return h(Tooltip, {title: text}, () => showText);
    }
    return text;
  },
  /**
   * 渲染a标签
   * @param text
   */
  renderHref: ({text}) => {
    if (!text) {
      return '';
    }
    const len = 20;
    if (text.length > len) {
      text = text.substr(0, len);
    }
    return h('a', {href: text, target: '_blank'}, text);
  },

  renderTag(text, color) {
    return isEmpty(text) ? h('span', text) : h(Tag, {color}, () => text);
  },

  /**
   * 根据字典编码 渲染
   * @param value 传入值
   * @param code 字典编码
   * @param useTag 是否使用tag渲染
   */
  renderDictByCodeOld: (value, code, useTag = true) => {
    let text = '';
    let color = '';
    let colorIndex = 0;
    let result: any;
    useUserStore().getDictData[code].forEach((item, index) => {
      if (item.value == value) {
        colorIndex = index;
        result = item;
        return;
      }
    });
    if (result) {
      text = result.label;
    }
    color = colorArray[colorIndex];
    return isEmpty(text) || !useTag ? h('span', text) : h(Tag, {color}, () => text);
  },

  /**
   * 根据字典编码 渲染
   * @param value 传入值
   * @param column 列
   * @param useTag 是否使用tag渲染
   */
  renderDictByCode: (value, column, useTag = true) => {
    const code = column.dictCode || column.dataIndex;
    const dictData = column.dictData || useUserStore().getDictData[code];
    if (dictData) {
      const result: any = dictData.find((item, index) => {
        item.index = index;
        return item.value == value;
      });
      if (result) {
        const text = result.label || '';
        const color = result.color || colorArray[result.index || 0];
        return isEmpty(text) || !useTag ? h('span', text) : h(Tag, {color}, () => text);
      } else {
        return '';
      }
    }
  },
  /**
   * 字典格式化 默认使用dataIndex作为字典code
   * @param text
   * @param column
   */
  renderDict: ({text, column}) => {
    return render.renderDictByCode(text, column, true);
  },
  /**
   * 开关组件渲染
   * @param text
   * @param record
   * @param column
   */
  renderSwitch: ({text, record, column}) => {
    const renderApi = column.renderApi;
    if (!renderApi) {
      console.error('renderSwitch需在column属性中配置renderApi属性,renderApi为后台更新状态接口地址');
      return;
    }
    const rowKey = column.rowKey;
    if (!renderApi) {
      console.error('renderSwitch需在column属性中配置rowKey属性,rowKey为实体类主键');
      return;
    }
    const params = {
      ids: record[rowKey],
    };
    params[rowKey] = record[rowKey];
    params[column.dataIndex] = text === 1 ? 0 : 1;
    return h(Switch, {
      checked: text === 1,
      onChange(checked) {
        request.post({url: renderApi, params}).then((data) => {
          record[column.dataIndex] = data;
        });
      },
    });
  },
};
export {render};
